<template>
    <div id="muke-share">
        <div id="muke-share-title">
            <h3>我的分享</h3>
        </div>
        <div id="muke-share-operate">
            <div class="ops" >共{{files.length}}项</div>
            <div class="ops" v-show="checkedFiles.length!=0">,&nbsp;已选{{checkedFiles.length}}项</div>
            <div class="ops" v-show="checkedFiles.length!=0">
                <el-row>
                    <el-button size="small" icon="el-icon-circle-close" round @click="deleteCheckedFiles(checkedFiles)">取消分享</el-button>
                </el-row>
            </div>
            <div style="clear:both;"></div>
        </div>
        <hr>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="files"
                    tooltip-effect="dark"
                    style="width:100%"
                    max-height="500"
                    v-loading="loading"
                    @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="50">
                </el-table-column>
                <el-table-column
                    type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="分享名称" label-width="80px">
                                <span>{{ props.row.shareName }}</span>
                            </el-form-item>
                            <el-form-item label="分享链接" label-width="80px">
                                <span>{{ props.row.shareUrl }}</span>
                            </el-form-item>
                            <el-form-item label="提取码" label-width="80px">
                                <span>{{ props.row.shareCode }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="shareName"
                    label="分享文件" 
                    style="width:50%">
                </el-table-column>
                <el-table-column
                    prop="shareTime"
                    label="分享时间"
                    style="width:30%">
                </el-table-column>
                <el-table-column
                    prop="validTime"
                    label="过期时间"
                    style="width:10%"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    align="right"  style="width:100">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="copyUrlAndCode(scope.$index, scope.row)">copyUrlAndCode</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
    </div>
</template>

<script>
import util from '../../utils/util';
export default {
    data(){
        return{
            files:[
                {shareName:'mukes',shareTime:'2020-10-20',invalidTime:'7',shareUrl:util.WEB_HOST + '/#/share/98df0436c5044876ba5478731aab6346',shareCode:'wd34'},
                {shareName:'muke3',shareTime:'2020-12-20',invalidTime:'-1',shareUrl:util.WEB_HOST + '/#/share/98df0436c5044876ba5478731aab6346',shareCode:'wd34'},
                {shareName:'muke2',shareTime:'2020-11-20',invalidTime:'30',shareUrl:util.WEB_HOST + '/#/share/98df0436c5044876ba5478731aab6346',shareCode:'wd34'},
            ],
            checkedFiles:[],
            loading:true
        }
    },
    mounted(){
        // 初始化查询所有分享数据
        this.queryAllShareData();
    },
    methods:{
        // 查询所有分享数据
        queryAllShareData(){
            this.$axios.post(util.API_HOST + '/file/share/query/all')
            .then(response => {
                let result = response.data;
                if(result.code === 200){
                    util.dataConvert(this.files,result.data);
                    this.files.forEach(function(obj,index){
                        obj.shareUrl = util.WEB_HOST + obj.shareUrl;
                    });
                }
                this.loading = false;
            }).catch(err => {
                this.$notify.error({
                    title:'分享数据查询错误',
                    message:err.message
                });
                this.loading = false;
            });
        },
        // 取消分享[删除分享数据]
        deleteCheckedFiles(checked){
            this.loading = true;
            let shareList = [];
            for (let share of checked) {
                shareList.push(share.id);
            }
            // 删除选中的分享数据
            this.$axios.post(util.API_HOST + '/file/share/delete',shareList)
            .then(response => {
                let result = response.data;
                if(result.code === 200){
                    this.$notify.success({
                        title:'分享文件删除成功',
                        message:result.message
                    });
                    // 删除本地选中的数据
                    for (let index = 0; index < checked.length; index++) {
                        for (let i = 0; i < this.files.length; i++) {
                            if(checked[index].id===this.files[i].id){
                                this.files.splice(i,1);
                                break;
                            }
                        }
                    }
                }
                this.loading = false;
            }).catch(err => {
                this.$notify.error({
                    title:'删除分享文件失败',
                    message:err.message
                });
                this.loading = false;
            });
            this.checkedFiles = [];
            
        },
        // 复制当前行的链接及提取码
        copyUrlAndCode(index,share){
            let url = share.shareUrl;
            let code = share.shareCode;
            var textarea = document.createElement('textarea');
            textarea.value = '链接: ' + url + '\r\n提取码: '+code;
            document.body.appendChild(textarea);
            textarea.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            textarea.className = 'textarea';
            textarea.style.display='none';
            this.$message({
                message: '链接复制成功',
                type: 'success'
            });
        },
        handleSelectionChange(checked){
            this.checkedFiles = checked;
        }
    }
    
}
</script>

<style scoped>
    #muke-share{
        position: absolute;
        left: 320px;right: 0;
        margin:0 20px;
    }
    #muke-share-operate{
        line-height: 34px;
        font-size: 15px;
    }
    .ops{
        float: left;margin: 0 10px 0 0;
    }

    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 290px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 100%;
    }
</style>